<template>
    <el-cascader :options="options" v-model="values" @change="handleChange" :props="props" style="width:100%" clearable>
    </el-cascader>
</template>

<script>
    import * as areaService from '@/api/bdms/area'
    export default {
        props: {
            value: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                options: [],
                values: [],
                timer: null,
                requestSize: 0,
                props: {
                    value: 'id',
                    label: 'title',
                    children: 'children'
                }
            }
        },
        watch: {
            value() {
                this.values = this.value
                if (this.values) {
                    this.initHandle()
                } else {
                    console.log("地区选择组件提示：未选择值")
                }
            }
        },
        mounted() {
            this.setTimer()
        },
        beforeDestroy() {
            this.options = []
            clearInterval(this.timer)
        },
        methods: {
            // 初始化值
            initHandle() {
                if (!this.values) {} else {
                    this.$nextTick(() => {
                        this.$emit("input", this.values)
                    });
                }
            },
            setTimer() {
                let that = this
                this.requestSize = 0
                this.timer = setInterval(() => {
                    if (this.requestSize <
                        5) {
                        that.getRemoteData()
                    }
                }, 500)
            },
            getRemoteData() {
                areaService.getAreaTree().then(data => {
                    this.options = data
                    this.initHandle()
                    clearInterval(this.timer)
                })
            },
            handleChange() {
                console.log("修改选择地址：", this.values)
                this.$emit("input", this.values)
            }
        }
    }
</script>